<template>
  <TypographyTitle content='英雄联盟这些约德尔人都是谁呀！' :level=4 />
  <TypographyParagraph>
    在小红书看到了这个图。约德尔人好可爱！但看这个卡通形象只能认出来提莫、小鱼人、兰博、飞机、波比、纳尔、克烈、璐璐！剩下的那几只是谁呀？薇古丝？小炮？
    <TypographyText content="#英雄联盟" strong />&nbsp;&nbsp;
    <TypographyText content="#约德尔人" strong />
  </TypographyParagraph>
  <a-list :header="`共 ${dataList.length} 条回复`" item-layout="horizontal" :data-source="dataList">
    <template #renderItem="{ item }">
      <a-list-item>
        <Comment :author="item.author" :avatar="item.avatar">
          <template #content>
            {{ item.content }}
          </template>
          <template #actions>
            <span key="comment-basic-like">
              <a-tooltip title="Like">
                <template v-if="action === 'liked'">
                  <LikeFilled @click="like" />
                </template>
                <template v-else>
                  <LikeOutlined @click="like" />
                </template>
              </a-tooltip>
              <span style="padding-left: 8px; cursor: auto">
                {{ item.likes }}
              </span>
            </span>
            <span key="comment-basic-dislike">
              <a-tooltip title="Dislike">
                <template v-if="action === 'disliked'">
                  <DislikeFilled @click="dislike" />
                </template>
                <template v-else>
                  <DislikeOutlined @click="dislike" />
                </template>
              </a-tooltip>
              <span style="padding-left: 8px; cursor: auto">
                {{ dislikes }}
              </span>
            </span>
            <span>回复</span>
            <Popconfirm title="确定删除吗？" v-if="item.author === userData.author">
              <span>删除</span>
            </Popconfirm>
          </template>
          <template #datetime>
            <Tooltip :title="item.datetime.format('YYYY-MM-DD HH:mm:ss')">
              <span>{{ item.datetime.fromNow() }}&nbsp;&nbsp;</span>
              <span>{{ item.ip }}</span>
              <!-- <span>{{ item.datetime.format('YYYY-MM-DD HH:mm:ss') }}</span> -->
            </Tooltip>
          </template>
          <div v-if="item.comment" v-for="item1 in item.comment">
            <Comment :author="item1.author" :avatar="item1.avatar">
              <template #content>
                {{ item1.content }}
              </template>
            </Comment>
          </div>
        </Comment>
      </a-list-item>
    </template>
  </a-list>
  <Comment :avatar="userData.avatar">
    <template #content>
      <a-form-item>
        <a-textarea v-model:value="userData.content" :rows="4" />
      </a-form-item>
      <a-form-item>
        <a-button html-type="submit" type="primary" >
          发布
        </a-button>
      </a-form-item>
    </template>
  </Comment>
</template>
<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import { List, Card, Image, Typography, Slider, Avatar, Divider, Comment, Tooltip, Popconfirm } from 'ant-design-vue';
import { LikeFilled, LikeOutlined, DislikeFilled, DislikeOutlined } from '@ant-design/icons-vue';
import dayjs from 'dayjs';

const TypographyTitle = Typography.Title;
const TypographyText = Typography.Text;
const TypographyParagraph = Typography.Paragraph;




const userData = ref(
  {
    id: 2,
    author: '她眼里丶还有光',
    ip: '中国·湘潭',
    avatar: 'https://gw.alipayobjects.com/zos/rmsportal/fcHMVNCjPOsbUGdEduuv.jpeg',
    content: '全是小波比，不知道咋赢啊 兄弟们.',
    datetime: dayjs().subtract(2, 'days'),
  }
)

const dataList = ref([
  {
    id: 1,
    author: '维栗虎绿德',
    ip: '江西·鹰潭',
    avatar: 'https://gw.alipayobjects.com/zos/rmsportal/BiazfanxmamNRoxxVxka.png',
    content: '璐璐King.',
    likes: 182,
    datetime: dayjs(),
    comment: [
      {
        id: 20,
        author: '她眼里丶还有光',
        ip: '中国·湘潭',
        avatar: 'https://gw.alipayobjects.com/zos/rmsportal/fcHMVNCjPOsbUGdEduuv.jpeg',
        content: '今天上了多少分了，想看看你的璐璐战绩，哈哈哈哈哈.',
        datetime: dayjs().subtract(2, 'days'),
      },
    ]
  },
  {
    id: 2,
    author: '她眼里丶还有光',
    ip: '中国·湘潭',
    avatar: 'https://gw.alipayobjects.com/zos/rmsportal/fcHMVNCjPOsbUGdEduuv.jpeg',
    content: '为萨不把提莫这个英雄删了，看到她就不想玩了.',
    datetime: dayjs().subtract(2, 'days'),
  },
  {
    id: 3,
    author: '璐璐不爱金克斯',
    ip: '湖北·武汉',
    avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
    content: '蘑菇波比、海鲜波比、烧烤波比、航天波比、爆射波比、忧郁波比、锤子波比、？？波比、渣渣波比、蜥蜴波比、萝莉波比',
    datetime: dayjs().subtract(2, 'days'),
  },
]);

const likes = ref<number>(0);
const dislikes = ref<number>(0);
const action = ref<string>();

const like = () => {
  likes.value = 1;
  dislikes.value = 0;
  action.value = 'liked';
};

const dislike = () => {
  likes.value = 0;
  dislikes.value = 1;
  action.value = 'disliked';
};


</script>
<style scoped></style>
